<template>
  <el-dialog v-dialogDrag :visible.sync="dialogVisible" title="保养项设置" width="950px" @close="resetForm('ruleForm')">
    <button-group ref="buttonGroup" @cancel="dialogVisible = false" />
    <div class="formTopFont">保养项设置</div>
    <el-row>
      <p class="title">
        <span>保养项列表</span>
        <el-button type="primary" size="mini" icon="el-icon-check" @click="batchBtn">批量添加</el-button>
      </p>
      <el-table ref="tableList" :data="tableList" height="250px" @selection-change="handleSelectionChange" stripe border>
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column align="center" type="index" label="索引" width="60px" />
        <el-table-column prop="itemName" label="保养项名称" show-overflow-tooltip />
        <el-table-column prop="itemCode" label="保养项编码" show-overflow-tooltip />
        <el-table-column prop="status" label="状态" show-overflow-tooltip>
          <template #default="{ row }">{{ row.status == 1 ? '正常':'停用' }}</template>
        </el-table-column>
        <el-table-column prop="remark" label="描述" show-overflow-tooltip />
      </el-table>
      <p class="title">
        <span>已配置列表</span>
      </p>
      <el-table ref="twoTabList" :data="twoTabList" height="250px" stripe border>
        <el-table-column align="center" type="index" label="索引" width="60px" />
        <el-table-column prop="itemName" label="保养项名称" show-overflow-tooltip />
        <el-table-column prop="itemCode" label="保养项编码" show-overflow-tooltip />
        <el-table-column prop="status" label="状态" show-overflow-tooltip>
          <template #default="{ row }">{{ row.status == 1 ? '正常':'停用' }}</template>
        </el-table-column>
        <el-table-column prop="remark" label="描述" show-overflow-tooltip />
        <el-table-column label="操作" fixed="right" align="center" width="100px">
          <template #default="{ row }">
            <el-button type="danger" icon="el-icon-delete" @click="deteleBtn(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </el-dialog>
</template>
<script>
export default {
  props: {},
  data() {
    return {
      title: '',
      tableList: [],
      dialogVisible: false,
      obj: {},
      multipleSelection: [],
      twoTabList: []
    }
  },
  watch: {},
  mounted() {},
  methods: {
    /**
     * @description: 新增编辑
     * @param {*} row
     * @return {*}
     */
    async showDialog(row) {
      this.obj = row
      this.getInfo(this.obj)
      this.dialogVisible = true
    },
    async getInfo(row) {
      const res1 = await this.$axios.get(
        `/equip/maintain/classify/detail?id=${row.id}`
      )
      if (res1.data.code === 200) {
        this.twoTabList = res1.data.data.itemList
      }
      const res = await this.$axios.get(
        `/equip/maintain/classify/getItemNotChoose?id=${row.id}`
      )
      if (res.data.code === 200) {
        this.tableList = res.data.data
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    /* 批量添加 */
    async batchBtn() {
      const res = await this.$axios.post(
        `/equip/maintain/classify/saveItem/${this.obj.id}`,
        this.multipleSelection
      )
      if (res?.data.code === 200) {
        this.$notify.success('提交成功！')
        this.getInfo(this.obj)
      } else {
        this.$notify.error(res.data.msg)
      }
    },
    /** 保存保养项 */
    async deteleBtn(row) {
      const res = await this.$axios.post(
        `/equip/maintain/classify/delItem?id=${this.obj.id}&itemId=${row.id}`
      )
      if (res.data.code === 200) {
        this.$notify.success('删除成功！')
        this.getInfo(this.obj)
      }
    },
    /** 关闭弹窗 */
    resetForm() {
      this.multipleSelection = []
      this.tableList = []
    }
  }
}
</script>
<style lang='scss' scoped>
.title {
  padding: 5px;
  margin: 5px 0;
  background: #f6f6f6;
  position: relative;
  height: 35px;
  line-height: 25px;
  button {
    position: absolute;
    right: 10px;
  }
}
</style>
